import { LitElement, html, render } from 'lit';
import { customElement, state } from 'lit/decorators.js';
// @ts-ignore  // 忽略找不到模块的类型声明
import '../../src/styles/global.css'; // 显式导入全局样式

// 导入组件（这些导入是必要的，因为组件需要在全局注册）
import '../../src/components/basic';
import '../../src/components/form';
import '../../src/components/data';
import '../../src/components/navigation';
import '../../src/components/feedback';

// 导入ZssMessage类型声明
import { ZssMessage } from '../../src/components/feedback/message/zss-message';

// 示例页面内容
@customElement('example-page')
class ExamplePage extends LitElement {
  @state() private showDialog: boolean = false;
  @state() private showLoading: boolean = false;

  /**
   * 显示通知
   * @param type 通知类型
   */
  private showNotification(type: 'success' | 'warning' | 'info' | 'error') {
    const messages = {
      success: '操作成功！',
      warning: '请注意操作',
      info: '这是一条信息通知',
      error: '操作失败'
    };
    
    const titles = {
      success: '成功',
      warning: '警告',
      info: '信息',
      error: '错误'
    };
    
    // 创建通知元素
    const notification = document.createElement('zss-notification');
    notification.setAttribute('title', titles[type]);
    notification.setAttribute('message', messages[type]);
    notification.setAttribute('type', type);
    notification.setAttribute('show-close', 'true');
    
    // 添加到页面
    document.body.appendChild(notification);
    
    // 5秒后自动移除
    setTimeout(() => {
      if (document.body.contains(notification)) {
        document.body.removeChild(notification);
      }
    }, 5000);
  }

  render() {
    return html`
  <div style="padding: 20px;">
    <h1>Zss Lit UI 组件库示例</h1>
    
    <!-- 按钮组件示例 -->
    <h2>按钮组件 (Button)</h2>
    <div style="display: flex; gap: 10px; margin: 20px 0;">
      <zss-button type="primary">主要按钮</zss-button>
      <zss-button type="success">成功按钮</zss-button>
      <zss-button type="info">信息按钮</zss-button>
      <zss-button type="warning">警告按钮</zss-button>
      <zss-button type="danger">危险按钮</zss-button>
      <zss-button type="text">文字按钮</zss-button>
    </div>
    
    <div style="display: flex; gap: 10px; margin: 20px 0;">
      <zss-button size="large">大型按钮</zss-button>
      <zss-button size="default">默认按钮</zss-button>
      <zss-button size="small">小型按钮</zss-button>
    </div>
    
    <div style="display: flex; gap: 10px; margin: 20px 0;">
      <zss-button disabled>禁用按钮</zss-button>
      <zss-button loading>加载中按钮</zss-button>
    </div>
    
    <!-- 图标组件示例 -->
    <h2>图标组件 (Icon)</h2>
    <div style="display: flex; gap: 10px; margin: 20px 0;">
      <zss-icon size="small">📱</zss-icon>
      <zss-icon size="medium">💻</zss-icon>
      <zss-icon size="large">🖥️</zss-icon>
      <zss-icon color="#409eff">🔍</zss-icon>
      <zss-icon color="#67c23a">✅</zss-icon>
      <zss-icon color="#f56c6c">❌</zss-icon>
    </div>
    
    <!-- 布局组件示例 -->
    <h2>布局组件 (Layout)</h2>
    <zss-container>
      <zss-row gutter="20">
        <zss-col span="6">
          <div style="background: #f0f9ff; padding: 20px; text-align: center;">1/2</div>
        </zss-col>
        <zss-col span="6">
          <div style="background: #f0f9ff; padding: 20px; text-align: center;">1/2</div>
        </zss-col>
      </zss-row>
      <zss-row gutter="20" style="margin-top: 20px;">
        <zss-col span="4">
          <div style="background: #f0f9ff; padding: 20px; text-align: center;">1/3</div>
        </zss-col>
        <zss-col span="4">
          <div style="background: #f0f9ff; padding: 20px; text-align: center;">1/3</div>
        </zss-col>
        <zss-col span="4">
          <div style="background: #f0f9ff; padding: 20px; text-align: center;">1/3</div>
        </zss-col>
      </zss-row>
    </zss-container>
    
    <!-- 表单组件示例 -->
    <h2>表单组件 (Form)</h2>
    <div style="max-width: 400px; margin: 20px 0;">
      <zss-input 
        placeholder="请输入内容" 
        clearable
        style="margin-bottom: 10px;"
      ></zss-input>
      <zss-input 
        type="password" 
        placeholder="请输入密码"
        style="margin-bottom: 10px;"
      ></zss-input>
      <zss-input 
        type="textarea" 
        placeholder="请输入多行文本"
        style="margin-bottom: 10px;"
      ></zss-input>
      
      <zss-select 
        .options=${[
          { label: '选项一', value: '1' },
          { label: '选项二', value: '2' },
          { label: '选项三', value: '3' }
        ]}
        placeholder="请选择"
        style="margin-bottom: 10px;"
      ></zss-select>
      
      <!-- 复选框组件示例 -->
      <div style="margin: 20px 0;">
        <zss-checkbox checked>选项一</zss-checkbox>
        <zss-checkbox>选项二</zss-checkbox>
        <zss-checkbox disabled>禁用选项</zss-checkbox>
        <zss-checkbox indeterminate>不确定状态</zss-checkbox>
      </div>
      
      <!-- 单选框组件示例 -->
      <div style="margin: 20px 0;">
        <zss-radio name="radio-group" checked>选项一</zss-radio>
        <zss-radio name="radio-group">选项二</zss-radio>
        <zss-radio name="radio-group" disabled>禁用选项</zss-radio>
      </div>
      
      <!-- 日期选择器组件示例 -->
      <zss-date-picker 
        placeholder="选择日期"
        style="margin-bottom: 10px;"
      ></zss-date-picker>
      
      <!-- 上传组件示例 -->
      <zss-upload 
        action="/api/upload"
        multiple
        style="margin-bottom: 10px;"
      >
        <zss-button type="primary">点击上传</zss-button>
      </zss-upload>
    </div>
    
    <!-- 表格组件示例 -->
    <h2>表格组件 (Table)</h2>
    <zss-table 
      .columns=${[
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'address', label: '地址' }
      ]}
      .data=${[
        { name: '张三', age: 25, address: '北京市朝阳区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 28, address: '广州市天河区' }
      ]}
      border
      selection
      style="margin: 20px 0;"
    ></zss-table>
    
    <!-- 卡片组件示例 -->
    <h2>卡片组件 (Card)</h2>
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0;">
      <zss-card 
        header="基础卡片"
        shadow="hover"
      >
        <div>这是一个基础卡片的内容区域</div>
      </zss-card>
      
      <zss-card 
        header="简单卡片"
        type="simple"
      >
        <div>这是一个简单卡片的内容区域</div>
      </zss-card>
      
      <zss-card 
        header="带阴影卡片"
        shadow="always"
      >
        <div>这是一个始终显示阴影的卡片</div>
      </zss-card>
    </div>
    
    <!-- 列表组件示例 -->
    <h2>列表组件 (List)</h2>
    <zss-list 
      .data=${[
        { id: 1, title: '列表项一', description: '这是第一个列表项的描述' },
        { id: 2, title: '列表项二', description: '这是第二个列表项的描述' },
        { id: 3, title: '列表项三', description: '这是第三个列表项的描述' }
      ]}
      border
      style="margin: 20px 0; max-width: 500px;"
    ></zss-list>
    
    <!-- 标签组件示例 -->
    <h2>标签组件 (Tag)</h2>
    <div style="display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap;">
      <zss-tag>默认标签</zss-tag>
      <zss-tag type="primary">主要标签</zss-tag>
      <zss-tag type="success">成功标签</zss-tag>
      <zss-tag type="warning">警告标签</zss-tag>
      <zss-tag type="danger">危险标签</zss-tag>
      <zss-tag type="info">信息标签</zss-tag>
      <zss-tag closable>可关闭标签</zss-tag>
      <zss-tag size="small">小型标签</zss-tag>
      <zss-tag size="large">大型标签</zss-tag>
    </div>
    
    <!-- 进度条组件示例 -->
    <h2>进度条组件 (Progress)</h2>
    <div style="max-width: 400px; margin: 20px 0;">
      <zss-progress percentage="30" style="margin-bottom: 10px;"></zss-progress>
      <zss-progress percentage="50" status="success" style="margin-bottom: 10px;"></zss-progress>
      <zss-progress percentage="70" status="warning" style="margin-bottom: 10px;"></zss-progress>
      <zss-progress percentage="90" status="danger" style="margin-bottom: 10px;"></zss-progress>
      <zss-progress percentage="100" status="success" show-text style="margin-bottom: 10px;"></zss-progress>
      <zss-progress type="circle" percentage="75" style="margin-bottom: 10px;"></zss-progress>
    </div>
    
    <!-- 徽章组件示例 -->
    <h2>徽章组件 (Badge)</h2>
    <div style="display: flex; gap: 20px; margin: 20px 0; align-items: center;">
      <zss-badge value="5">
        <zss-button>消息</zss-button>
      </zss-badge>
      <zss-badge value="99+" type="danger">
        <zss-button>通知</zss-button>
      </zss-badge>
      <zss-badge is-dot>
        <zss-button>新消息</zss-button>
      </zss-badge>
      <zss-badge value="12" type="warning" is-independent>
        独立徽章
      </zss-badge>
    </div>
    
    <!-- 树形组件示例 -->
    <h2>树形组件 (Tree)</h2>
    <zss-tree 
      .data=${[
        {
          id: 1,
          label: '一级节点 1',
          children: [
            { id: 4, label: '二级节点 1-1' },
            { id: 5, label: '二级节点 1-2' }
          ]
        },
        {
          id: 2,
          label: '一级节点 2',
          children: [
            { id: 6, label: '二级节点 2-1' },
            { id: 7, label: '二级节点 2-2' }
          ]
        },
        { id: 3, label: '一级节点 3' }
      ]}
      show-checkbox
      style="margin: 20px 0; max-width: 300px;"
    ></zss-tree>
    
    <!-- 菜单组件示例 -->
    <h2>菜单组件 (Menu)</h2>
    <div style="display: flex; gap: 20px; margin: 20px 0;">
      <zss-menu 
        .items=${[
          { label: '首页', value: 'home' },
          { label: '产品', value: 'product', children: [
            { label: '产品列表', value: 'product-list' },
            { label: '产品详情', value: 'product-detail' }
          ]},
          { label: '关于我们', value: 'about' }
        ]}
        style="width: 200px;"
      ></zss-menu>
      
      <zss-menu 
        mode="horizontal"
        .items=${[
          { label: '首页', value: 'home' },
          { label: '产品', value: 'product' },
          { label: '关于我们', value: 'about' }
        ]}
        style="width: 400px;"
      ></zss-menu>
    </div>
    
    <!-- 面包屑组件示例 -->
    <h2>面包屑组件 (Breadcrumb)</h2>
    <zss-breadcrumb 
      .items=${[
        { label: '首页', href: '/' },
        { label: '用户管理', href: '/users' },
        { label: '用户详情', href: '/users/123' }
      ]}
      style="margin: 20px 0;"
    ></zss-breadcrumb>
    
    <!-- 分页组件示例 -->
    <h2>分页组件 (Pagination)</h2>
    <zss-pagination 
      total="100"
      page-size="10"
      current-page="1"
      style="margin: 20px 0;"
    ></zss-pagination>
    
    <!-- 标签页组件示例 -->
    <h2>标签页组件 (Tabs)</h2>
    <zss-tabs 
      .tabs=${[
        { label: '标签一', value: 'tab1' },
        { label: '标签二', value: 'tab2' },
        { label: '标签三', value: 'tab3' }
      ]}
      style="margin: 20px 0; max-width: 500px;"
    ></zss-tabs>
    
    <!-- 消息组件示例 -->
    <h2>消息组件 (Message)</h2>
    <div style="display: flex; gap: 10px; margin: 20px 0;">
      <zss-button @click=${() => ZssMessage.success('操作成功！')}>成功消息</zss-button>
      <zss-button @click=${() => ZssMessage.info('这是一条信息')}>信息消息</zss-button>
      <zss-button @click=${() => ZssMessage.warning('请注意操作')}>警告消息</zss-button>
      <zss-button @click=${() => ZssMessage.error('操作失败')}>错误消息</zss-button>
    </div>
    
    <!-- 对话框组件示例 -->
    <h2>对话框组件 (Dialog)</h2>
    <div style="display: flex; gap: 10px; margin: 20px 0;">
      <zss-button @click=${() => this.showDialog = true}>打开对话框</zss-button>
    </div>
    ${this.showDialog ? html`
      <zss-dialog 
        title="示例对话框"
        .visible=${this.showDialog}
        @close=${() => this.showDialog = false}
      >
        <div>这是一个示例对话框的内容</div>
        <div slot="footer">
          <zss-button @click=${() => this.showDialog = false}>取消</zss-button>
          <zss-button type="primary" @click=${() => this.showDialog = false}>确定</zss-button>
        </div>
      </zss-dialog>
    ` : ''}
    
    <!-- 加载组件示例 -->
    <h2>加载组件 (Loading)</h2>
    <div style="display: flex; gap: 10px; margin: 20px 0;">
      <zss-button @click=${() => this.showLoading = true}>显示加载</zss-button>
    </div>
    ${this.showLoading ? html`
      <zss-loading 
        .visible=${this.showLoading}
        text="加载中..."
      ></zss-loading>
    ` : ''}
    
    <!-- 通知组件示例 -->
    <h2>通知组件 (Notification)</h2>
    <div style="display: flex; gap: 10px; margin: 20px 0;">
      <zss-button @click=${() => this.showNotification('info')}>信息通知</zss-button>
      <zss-button @click=${() => this.showNotification('success')}>成功通知</zss-button>
      <zss-button @click=${() => this.showNotification('warning')}>警告通知</zss-button>
      <zss-button @click=${() => this.showNotification('error')}>错误通知</zss-button>
    </div>
  </div>
`;

  }
}

// 渲染示例页面
if (!customElements.get('example-page')) {
  customElements.define('example-page', ExamplePage);
}
render(html`<example-page></example-page>`, document.getElementById('app')!);